<template>
  <div>
    <el-table :data="articles">
      <el-table-column prop="title" label="文章标题" width="140">
      </el-table-column>
      <el-table-column prop="body" label="文章内容" width="120">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button  size="small" @click="editArticle(scope.row._id)">编辑</el-button>
          <el-button  size="small" @click="deleteArticle(scope.row._id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data () {
    return {
      articles: []
    }
  },
  created () {
    this.getArticlesList()
  },
  methods: {
    // 获取文章列表
    getArticlesList () {
      this.$http.get('/articles').then(response => {
        this.articles = response.data
        // console.log(this.articles)
      })
    },
    // 编辑文章
    editArticle (rowId) {
      this.$router.push(`/articles/${rowId}/edit`)
    },
    // 删除文章
    deleteArticle (rowId) {
      this.$http.delete(`/articles/${rowId}`).then(response => {
        // console.log(response)
        this.$message.success('删除成功')
      })
      this.getArticlesList()
    }
  }
}
</script>
<style scoped>

</style>
